<template>
	<div class="test-index">
		<v-chart autoresize :option="option" style="height: 100%" />
	</div>
</template>

<script>
	export default {
		props: {
			chartData: {
				type: Object,
				default(){
					return {}
				}
			},
		},
		data() {
			return {
				option: {

					title: [{
						text: '年龄分布',
						left: 'center',
						textStyle: {
							color: '#fff',
							fontSize: '16'
						}

					}],
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)",
						position: function(p) { //其中p为当前鼠标的位置
							return [p[0] + 10, p[1] - 10];
						}
					},
					legend: {
						top: '85%',
						itemWidth: 10,
						itemHeight: 10,
						data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
						textStyle: {
							color: 'rgba(0,0,0,.5)',
							fontSize: '14',
						}
					},
					series: [{
						name: '年龄分布',
						type: 'pie',
						center: ['50%', '42%'],
						radius: ['40%', '60%'],
						color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab',
							'#06dcab', '#06f0ab'
						],
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 1,
								name: '0岁以下'
							},
							{
								value: 4,
								name: '20-29岁'
							},
							{
								value: 2,
								name: '30-39岁'
							},
							{
								value: 2,
								name: '40-49岁'
							},
							{
								value: 1,
								name: '50岁以上'
							},
						]
					}]
				}
			}
		},
		mounted() {

		},
		watch: {
			chartData: {
				deep: true,
				immediate: true,
				handler(val) {
					this.setData(val)
				}
			}
		},
		methods: {
			setData({
				xData,
				yData
			} = {}) {
				console.log("chartData", xData,yData)
				this.option.legend.data = xData
				this.option.series[0].data = yData
			}
		},
	}
</script>

<style lang="scss">
	.test-index {
		width: 100%;
		height: 100%;
	}
</style>